<template>
  <div id="front-home-container">
    <div id="front-home-box">
      <header :class="{'index-nav':$route.name=='index'}" v-show="$route.name!='register'&&$route.name!='get-password'"
              ref="header">
        <div id="nav" class="clear-fix">
          <div id="logo" class="left" @click="goIndex"></div>
          <ul class="nav-list left">
            <li :class="{'active':$route.name=='search-type'&&$store.state.searchResultType==1}">
              <nuxt-link to="/search" style="display: inline-block;width: 100%;height: 100%;text-decoration: none">首页
              </nuxt-link>
            </li>
            <li :class="{'active':$store.state.searchResultType==2}" @click="goSearch('subscribe')"
                class="my-subscribe">我的订阅<span class="num-message"
                                               v-show="$store.state.subscriberMessageNum">{{
                $store.state.subscriberMessageNum >= 100 ? '99+' : $store.state.subscriberMessageNum
              }}</span>
            </li>
            <!-- <li :class="{'active':$store.state.searchResultType==2}" @click="goSearch('subscribe')" class="my-subscribe">我的订阅<span class="num-message" v-if="isSubscriberMessageNum">{{$store.state.subscriberMessageNum>=100?'99+':$store.state.subscriberMessageNum}}</span></li> -->
            <li :class="{'active':$store.state.searchResultType==3}" @click="goSearch('collect')" class="my-collection">
              我的收藏
            </li>
            <li @click="displaySubscriber" class="subscriber">
              <i class="icon-subscriber"></i>
              <span> 订阅器</span>
            </li>
            <li @click="displayOpenMember" class="open-member">开通会员</li>
          </ul>
          <div v-if="$store.state.nickName">
            <div class="login-register user-name right">
              {{
                $store.state.nickName.length > 6 ? $store.state.nickName.substr(0, 6) + '...' :
                  $store.state.nickName
              }}
              <i class="el-icon-arrow-down"></i>

              <ul class="user-options-list">
                <li @click="goPersonalInfo">个人中心</li>
                <li @click="logout">退出</li>
              </ul>
            </div>
          </div>
          <div v-else>
            <div class="login-register register right" @click="register">
              <!-- <nuxt-link :to="{name:'register'}" target="_blank"> -->
              注册
              <!-- </nuxt-link> -->
            </div>
            <div class="login-register right" style="margin: 0 16px;">|</div>
            <div class="login-register login right" @click="login">
              登录
            </div>
          </div>

          <div :class="{active:$store.state.hasNewMessage}"
               @click="goMessageCenter"
               class="icon-zhanneixin right"
               title="消息中心"
          ></div>
          <nuxt-link to="/personal/help">
            <span class="icon-bangzhu right" title="帮助中心"></span>
          </nuxt-link>
        </div>

      </header>
      <nuxt/>
      <footer id="footer" v-show="$route.name!='index'&&$route.name!='register'&&$route.name!='get-password'"
              ref="footer">
        <div class="footer-box">
          北京正福易采通科技有限公司 版权所有 &nbsp;&nbsp;&nbsp;地址：北京市丰台区南四环西路186号汉威国际广场一区1号楼201单元 &nbsp;&nbsp;&nbsp;技术支持：政府采购信息网
          <br>
          网址：http://www.caigou2003.com/ &nbsp;&nbsp;电话：010-88587089转885、222、224、806 &nbsp;&nbsp;E-mail:webmaster#caigou2003.com(*发送邮件时请把#改成@)
        </div>
      </footer>
    </div>
    <el-dialog
      title="警告"
      :visible.sync="dialogAddVisible"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :show-close="false"
      :top="200+'px'"
      width="50%">
      <p class="old-browser-sign">
        您的IE浏览器版本过低，请将IE浏览器升级至最新版本或使用以下浏览器访问：
      </p>
      <ul class="browser-list">
        <li v-for="item in browserList"
            :key="item.name"
        >
          <a :href="item.officeUrl" target="_blank" :title="item.name"></a>
        </li>
      </ul>
    </el-dialog>
    <login-dialog :visible="$store.state.loginDialogShow" v-if="$store.state.loginDialogShow"></login-dialog>
    <subscriber v-if="$store.state.subscriberShow"></subscriber>
    <open-member v-if="$store.state.openMemberShow"></open-member>
  </div>
</template>
<script>
import {sso_register, sso_signOut} from '@/plugins/sso-login.js'

export default {
  name: "frontHome",
  data() {
    return {
      dialogAddVisible: false,
      newMessageTimer: null,
      browserList: [
        {
          name: 'Google Chrome',
          officeUrl: 'https://www.google.cn/intl/zh-CN/chrome/'
        },
        {
          name: 'Firefox',
          officeUrl: 'http://www.firefox.com.cn/'
        },
        {
          name: 'Opera Browser',
          officeUrl: 'https://www.opera.com/zh-cn'
        },
        {
          name: 'Safari',
          officeUrl: 'https://www.apple.com.cn/cn/safari/'
        },
        {
          name: '360Speed Browser',
          officeUrl: 'https://browser.360.cn/ee/'
        },
        {
          name: 'QQ Browser',
          officeUrl: 'https://browser.qq.com/'
        },
        {
          name: 'Microsoft Edge ',
          officeUrl: 'https://www.microsoft.com/en-us/edge'
        },
      ],
    }
  },
  watch: {
    $route() {
      setTimeout(() => {
        this.computedMainHeight();
      })
    }
  },
  created() {
    let token = process.client && localStorage.getItem('token') ? localStorage.getItem('token') :
      process.client && sessionStorage.getItem('token') ? sessionStorage.getItem('token') :
        ''
    this.$store.commit('changeToken', token)
  },
  mounted() {
    this.computedMainHeight();

    const browserVersion = this.utils.IEVersion();

    if (!(browserVersion == '0' || browserVersion == '11' || browserVersion == 'edge')) {
      this.dialogAddVisible = true;
    }
    this.currentUser();
    this.requestHasNewMessage();
    this.newMessageTimer = setInterval(() => {
      this.requestHasNewMessage();
    }, 60 * 1000);
    window.addEventListener("storage", e => {
      let s = e.storageArea
      if (s && s.userInfo && !this.$store.state.nickName) {
        let u = JSON.parse(s.userInfo)
        this.$store.commit('changeNickName', u.nickname)
      }
      if (s && s.token && !this.$store.state.token) {
        this.$store.commit('changeToken', s.token)
      }
    })
  },
  destroyed() {
    clearInterval(this.newMessageTimer);
    this.newMessageTimer = null;
  },
  methods: {
    requestHasNewMessage() {
      this.$request.hasNewMessage().then(res => {
          if (res.status == 200) {
            this.$store.commit('changeHasNewMessage', res.data);
          }
        }
      );
      this.$request.findSubscriberMessageNum().then(res => {
          if (res.status == 200) {
            console.log("-------aaaaaaa------", res.data);
            this.$store.commit('changeSubscriberMessageNum', res.data ? res.data : 0);
          }
        }
      );
    },
    computedMainHeight() {
      const oHeaderHeight = this.$refs['header'].clientHeight;
      const oFooterHeight = this.$refs['footer'] ? this.$refs['footer'].clientHeight : 135;
      const oContainer = document.querySelector('#front-home-box>.container');
      console.log(oContainer)
      const clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
      oContainer.style.minHeight = (clientHeight - oHeaderHeight - oFooterHeight - 1) + 'px';
    },
    register() {
      // 点击注册按钮
      sso_register()
    },
    login() {
      // console.log("点击了登录按钮");
      this.$store.commit('changeLoginDialogShow')
    },
    logout() {
      this.$store.commit("clearToken");
      this.$store.commit("clearNickName");
      localStorage.removeItem('token');
      sessionStorage.removeItem('token');
      // this.$router.push({
      //     name: 'index'
      // })
      sso_signOut()
    },
    displaySubscriber() {
      this.$store.commit('changeSubscriberShow', true);
    },
    displayOpenMember() {
      this.$store.commit('changeOpenMemberShow', true);
    },
    goIndex() {
      if (this.$route.name !== 'index') {
        this.$router.push({
          name: "index"
        });
      }
    },
    goSearch(type) {
      this.$router.push({
        path: `/search/${type}`,
      });
      /*if (this.$route.name === 'searchResult') {
          this.$store.state.searchResultType = type;
      }*/
    },
    getData(data) {
      console.log(data)
    },
    goHelp() {
      this.$router.push({
        name: 'helpCenter'
      })
    },
    goMessageCenter() {
      this.$router.push({
        name: 'personal-messages'
      })
    },
    goPersonalInfo() {
      this.$router.push({
        name: 'personal-info'
      })
    }
  }
}
</script>
<style lang="less">
/////////////////////////////////////////////////////reset start
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, button, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
  box-sizing: border-box;
}

body {
  line-height: 1;
}

:focus {
  //outline: 1;
}

article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
  display: block;
}

ul, ol, li {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after, q:before, q:after {
  content: '';
  content: none;
}

a {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
  color: inherit;

  &:visited {
    color: inherit;
  }

  &:hover {
    color: inherit;
    text-decoration: underline;
  }

  &:active {
    color: inherit;
    text-decoration: none;
  }
}

ins {
  background-color: #ff9;
  color: #000;
  text-decoration: none;
}

mark {
  background-color: #ff9;
  color: #000;
  font-style: italic;
  font-weight: bold;
}

del {
  text-decoration: line-through;
}

abbr[title], dfn[title] {
  border-bottom: 1px dotted #000;
  cursor: help;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #cccccc;
  margin: 1em 0;
  padding: 0;
}

button {
  cursor: pointer;
  font-family: inherit;
}

input, select {
  vertical-align: middle;
}

textarea {
  outline: none;
  background: none;
}

input {
  outline: none;
  background: none;
  box-sizing: border-box;

  &::-ms-clear,
  &::-ms-reveal {
    display: none;
  }

  &[type="text"]:focus,
  &[type="password"]:focus {
    border: 1px solid #eb7350;

    background: #fff;

    outline: none;
  }
}

.format-error-sign {
  display: none;
}

.format-error {
  border: 1px solid @color-error !important;
  position: relative;

  & + .format-error-sign {
    display: inline;
    .color(@color-error);
    .fz(14px);
    padding-left: 10px;
  }
}

i, .icon {
  display: inline-block;
  vertical-align: middle;
}

/////////////////////////////////////////////////////////////////////reset end
html {
  .height;
}

#__nuxt {
  .height;
}

#__layout {
  .height;
}

body {
  height: 100%;
  font-family: "Microsoft YaHei", "微软雅黑", "宋体", "黑体", "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  .color(#2c3e50);

  @font-face {
    font-family: AlibabaPuHuiTiR;
    src: url(../static/fonts/Alibaba-PuHuiTi-Regular.woff);
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }

  #container {
    .height();

    #wrapper {
      .min-height(100%);

      .search-result-pagination {
        .fr;
        padding: 0;

        .btn-prev, .btn-next {
          .size(79px, 36px);
          .fz(14px) !important;
          .color(#252627) !important;
          background-color: #ffffff !important;
          border: 1px solid #EBEBEB !important;

          &:disabled {
            .color(#C0C4CC) !important;
          }
        }

        .el-pager {
          li {
            .min-width(36px) !important;
            .lh(36px);
            .fz(20px);
            .color(#888888) !important;
            font-weight: lighter;
            .border-radius(4px) !important;
            background-color: #ffffff !important;
            border: 1px solid #EBEBEB !important;

            &.active {
              background-color: @main-color !important;
              .color(#ffffff) !important;
            }

            &.el-icon-more {
              border: none !important;

              &.btn-quicknext, &.btn-quicknext + li {
                display: none !important;
              }
            }

            &.el-icon-d-arrow-right, &.el-icon-d-arrow-left {
              border: none !important;
              .color(@main-color) !important;
            }
          }
        }
      }
    }
  }

  #front-home-container {
    .height;
    font-family: AlibabaPuHuiTiR, "黑体";
    .color(#252627);
    .min-height(100%);

    @height-light-color: @main-color;

    .high-light {
      .color(@height-light-color);
    }

    .bid-tag {
      display: inline-block;
      padding: 5px 10px;
      .border-radius(5px);
      .fz(14px);
      .color(#ffffff);
      .max-width(300px);
      .ellipsis;
    }

    .tag-color-1 {
      .bid-tag;
      background-color: @tag-color-1;
    }

    .tag-color-2 {
      .bid-tag;
      background-color: @tag-color-2;
    }

    .tag-color-3 {
      .bid-tag;
      background-color: @tag-color-3;
    }

    .tag-color-4 {
      .bid-tag;
      background-color: @tag-color-4;
    }

    .tag-color-5 {
      .bid-tag;
      background-color: @tag-color-5;
    }

    .tag-color-6 {
      .bid-tag;
      background-color: @tag-color-6;
    }

    .old-browser-sign {
      .fz(18px);
    }

    ul.browser-list {
      margin-top: 30px;
      .center(text-x);

      & > li {
        display: inline-block;
        .size(80px, 80px);
        .bg-for(7, 'public_icon-browser-', 'png');

        & + li {
          margin-left: 10px;
        }

        & > a {
          display: inline-block;
          .size;
        }
      }
    }

    #front-home-box {
      .height;
      overflow: auto;
      position: relative;

      header {
        .size(100%, 70px);
        border-bottom: 1px solid #E6E6E6;

        #nav {
          .size(1200px);
          .center(auto-x);
          .color(#252627);

          #logo {
            .size(203px);
            .bg("@{img-base-url}public_logo-color.png");
            cursor: pointer;
          }

          ul.nav-list {
            .height();
            margin-left: 66px;
            font-weight: bold;

            & > li {
              .fl();
              .fz(18px, 70px);
              padding: 0 20px;
              font-weight: 400;
              cursor: pointer;

              &.my-subscribe {
                position: relative;
                /*padding-right: 43px;*/

                span {
                  @width: 36px;
                  @height: 20px;

                  display: inline-block;
                  .width(@width);
                  .lh(@height);
                  .center(text-x);
                  .fz(14px);
                  .color(#fff);
                  background-color: @main-color;
                  .border-radius(10px);
                  /*position: absolute;*/
                  /*top: 19px;*/
                  /*right: 6px;*/
                  margin-right: -@width/2;
                  position: relative;
                  top: -@height/2;
                }
              }

              &.subscriber {
                i.icon-subscriber {
                  display: inline-block;
                  .size(20px, 20px);
                  .bg("@{img-base-url}subscriber_icon-shopping-active.png");
                  vertical-align: middle;

                  & + span {
                    .color(@main-color);
                    vertical-align: middle;
                  }
                }
              }

              &.open-member {
                .color(@main-color);
              }

              &.active {
                .color(#ffffff);
                background-color: #F7881E;

                &.my-subscribe {
                  span {
                    border: 1px solid #ffffff;
                    box-sizing: border-box;
                  }
                }
              }
            }
          }

          .btn-logout {
            .size(72px, 32px);
            border: 1px solid #252627;
            .border-radius(5px);
            .center(text-x);
            line-height: 30px;
            margin-top: 18px;
            margin-left: 20px;
            cursor: pointer;
          }

          .login-register {
            .fz(14px, 70px);

            &.register {
              cursor: pointer;
            }

            &.login {
              cursor: pointer;
            }

            &.user-name {
              .min-width(100px);
              position: relative;
              padding: 0 16px;
              .transition(.5s);
              .center(text);

              @li-height: 48px;

              & > i {
                .transition(transform .5s);
              }

              &:hover {
                background-color: #F7881E;
                color: #ffffff;
                cursor: pointer;

                & > i {
                  transform: rotate(-180deg);
                }

                ul.user-options-list {
                  .height(@li-height*2);

                  & > li {
                    &:hover {
                      background-color: #f8972a;
                    }
                  }
                }
              }

              ul.user-options-list {
                .size(100%, 0);
                .transition(height .5s);
                overflow: hidden;
                position: absolute;
                left: 0;
                z-index: 999;
                text-align: center;

                & > li {
                  .lh(@li-height);
                  background-color: #F7881E;

                  &:hover {
                    background-color: #f8972a;
                  }
                }
              }
            }
          }

          .icon-zhanneixin {
            .size(14px);
            .bg("@{img-base-url}public_icon-zhanneixin.png");
            margin-right: 28px;
            cursor: pointer;
            position: relative;

            &.active {
              &:after {
                display: inline-block;
                .size(7px, 7px);
                background-color: #DD3A2B;
                position: absolute;
                right: 0;
                top: 25px;
                content: ' ';
                .border-radius(50%);
              }
            }

          }

          .icon-bangzhu {
            .size(16px);
            .bg("@{img-base-url}public_icon-bangzhu.png");
            margin-right: 38px;
            cursor: pointer;
          }
        }

        &.index-nav {
          position: absolute;
          z-index: 1;
          border-bottom-color: #FFDFAE;

          #nav {
            .width(auto);
            .max-width(1506px);
            .min-width(800px);
            .color(#FBFCFE);

            ul.nav-list {
              & > li {
                &.my-subscribe {
                  span {
                    background-color: #DD3A2B;
                  }
                }

                &.subscriber {
                  i.icon-subscriber {
                    .bg("@{img-base-url}subscriber_icon-shopping.png") !important;

                    & + span {
                      .color(#FBFCFE) !important;
                      vertical-align: middle;
                    }
                  }
                }

                &.open-member {
                  .color(#FBFCFE);
                }
              }
            }


            #logo {
              .bg("@{img-base-url}public_logo.png");
            }

            .icon-zhanneixin {
              .bg("@{img-base-url}index_icon-zhanneixin.png");
            }

            .icon-bangzhu {
              .bg("@{img-base-url}index_icon-bangzhu.png");
            }
          }
        }
      }

      #footer {
        .size(100%, 135px);
        background-color: #525156;
        .color(#ffffff);
        .fz(14px);
        line-height: 36px;
        /*margin-top: 20px;*/
        /*position: absolute;*/
        /*bottom: 0;*/

        .footer-box {
          .size(3500px, 135px);
          .center(text);
        }
      }
    }
  }
}
</style>
